import React from "react";
import { NavLink } from "react-router-dom";
import { Card, Pagination } from "antd";
const { Meta } = Card;

export default class Product extends React.Component {
  componentDidMount() {
    console.log(this.props);
    this.props.getList();
  }
  onShowSizeChange = (current, pageSize) => {
    console.log(current, pageSize);
    this.props.getList(current, pageSize);
  };
  pageChange = (a, b) => {
    this.props.getList(a, b);
  };
  render() {
    const { lists, addToCart, boo } = this.props;
    const ulStyle                   = {
      display       : "flex",
      flexFlow      : "row wrap",
      justifyContent: "space-around",
      textAlign     : "center"
    };
    const textStyle = {
      height    : "60px",
      lineHeight: "20px",
      overflow  : "hidden",
      margin    : "10px auto 5px"
    };
    if (boo) {
      return (
        <div style={{ textAlign: "center", margin: "0 auto", width: "1200px" }}>
          <ul style={ulStyle}>
            {lists.rows.map((item, index) => {
              var productUrl = "/product/" + item.id;
              return (
                <Card
                  hoverable
                  style={{
                    width       : 200,
                    float       : "left",
                    margin      : "10px 5px",
                    boxShadow   : "1px 2px 4px #888",
                    borderRadius: "2%",
                    overflow    : "hidden"
                  }}
                  cover = {<img alt="图片" src={item.img} />}
                  key   = {index}
                >
                  <Meta title={item.title} />
                  <p style={textStyle}>{item.text}</p>

                  <button onClick={() => addToCart(item)}>加入购物车</button>
                  <NavLink to={productUrl}>查看详情</NavLink>
                </Card>
              );
            })}
          </ul>
          <Pagination
            showSizeChanger
            onShowSizeChange = {this.onShowSizeChange}
            onChange         = {this.pageChange}
            defaultCurrent   = {1}
            total            = {+lists.total}
            style            = {{ margin: "10px auto 20px" }}
          />
        </div>
      );
    } else {
      return (
        <div>
          <NavLink to="/login">请先登录！</NavLink>
        </div>
      );
    }
  }
}
